<!--各组现状-->

#include('head.html', {title: '各组现状'})
<style>
    #content{
        margin-bottom:0px;
    }
    #footer{
        position: fixed;
        text-align: center;
        width: 100%;
        bottom: 0px;
        background: rgba(252, 252, 252, 0.69);
    }
    .group{
        background: #00BCD4;
        color: #fff;
    }
    .accordion-toggle{
        width: 100%;
        display: block;
        color:#fff!important;
    }
    .groupli1{
        background-color: #4cb6cb !important;
        color: #eaf6f9 !important;
    }
    .groupli1 a {
        color: #ffffff !important;
    }
    .groupli1 .text-muted {
        color: #c3e6ed !important;
    }
    .groupli2{
        background-color: #545ca6 !important;
        color: #dadcec !important;
    }
    .groupli2 a {
        color: #fcfcfd !important;
    }
    .groupli2 .text-muted {
        color: #b8bbdb !important;
    }
    .groupli3{
        background-color: #1ab667 !important;
        color: #a9f3ce !important;
    }
    .groupli3 a {
        color: #d6f9e7 !important;
    }
    .groupli3 .text-muted {
        color: #7decb4 !important;
    }
    .groupli3 .accordion-toggle{
        color:#fff!important;
    }
    .groupli0{
        background-color: #fff !important;
        color: #788188 !important;
    }
    .groupli0 a{
        color: #ccc !important;
    }
    .groupli0 .accordion-toggle{
        color: #788188 !important;
    }

    .leaders{
        color:#4cb6cb;
    }
    .collapse .leaders:hover{
        color:#ffc107;
    }
    .leicon{
        margin:0 5px;
    }
    .headicon{
        height: 30px;
        width: 21px;
        border-radius: 100%;
        margin-right: 10px;
    }
    .dd-item11 .dd-handle:hover{
        background: rgba(219, 227, 218, 0.1);
        color:#4cb6cb;
    }
    @media (max-width: 767px){
      #content{
          margin-top:-50px;
      }
    }
  </style>
<section class="vbox" id="app">
  #include('header.html')

  <section>
    <section class="hbox stretch">
      <!-- .aside -->
      <aside class="bg-black dk nav-xs aside hidden-print" id="nav">
        #include('list.html')
      </aside>
      <!-- /.aside -->
      <section id="content">
        <section class="vbox">
          <header class="header bg-light b-b">
            <p>各组现状</p>
          </header>
          <section class="scrollable wrapper">
            <div class="">
              <!--<h4 class="m-t-none">Group list <small>(drag to sort)</small></h4>-->
              <!--<ul class="list-group gutter list-group-lg list-group-sp sortable">-->
              <div class="panel-group m-b" id="accordion2">
                #set(i=1)
                #for(Group group : groups)
                  <div class="panel panel-default">
                  <li class="list-group-item panel-heading groupli${i%4}">
                    <span class="pull-right" >
                      <a class="aplus"><i class="fa fa-plus fa-fw m-r-xs"></i></a>
                      <a class="aminus" style="display:none;"><i class="fa fa-minus fa-fw m-r-xs"></i></a>
                    </span>
                  <span class="pull-left media-xs"><i class="fa fa-sort text-muted fa m-r-sm"></i> 0${i}</span>
                  <a class="accordion-toggle collapsed text-white" data-toggle="collapse" data-parent="#accordion2" href="#collapse${i}">
                    ${group.g_gname}
                  </a>
                </li>
                <div id="collapse${i}" class="panel-collapse collapse" style="height: auto;">
                  <div class="panel-body text-sm">
                    <h4>组别描述</h4>${group.g_describe}
                    <hr>
                    <h4>组员数量</h4>${members[i-1].size()}
                    <hr>
                    <h4>历届组长</h4>
                    #set(j=0)
                    #for(Leader leader : leaders[i-1])
                    #if(j==0)
                    #else
                    <i class="fa fa-angle-right leicon"></i>
                    #end
                    #set(List user = leadersname[i-1])
                    <span class="badge bg-info">0${j+1}<a href="/users/${leader.le_memberid}" class="leaders"> ${user[j].m_realname}</a></span>
                    #set(j=j+1)
                    #end
                  </div>
                </div>
                </div>
                #set(i=i+1)
                #end

              <!--</ul>-->
              </div>
            </div>
            <h4 class="m-t-none">各组新成员展示
              <button class="btn btn-xs btn-default active openorclose" data-toggle="button">
                <i class="fa fa-plus text fa-fw"></i>
                <span class="text">扩展</span>
                <i class="fa fa-minus text-active fa-fw"></i>
                <span class="text-active">收起</span>
              </button>
            </h4>
            <div class="row m-b" style="margin-bottom: 50px;">
              #set(k=0)
              #for(Group group : groups)
              <div class="col-sm-3">
                <div class="dd" id="nestable1">
                  <ol class="dd-list">
                    <li class="dd-item" data-id="1">
                      <div class="dd-handle group"><i class="fa fa-angle-double-right fa-fw"></i>${group.g_gname}</div>
                    </li>
                    <li class="dd-item dd-item11" data-id="2">
                      <div class="dd-handle" onclick="location.href='users/${group.g_leader}'" style="padding: 5px 10px;"><img src="/static/upload/img/${gleader[k].m_headPortrait}" class="headicon"> ${gleader[k].m_realname}<span class="badge pull-right">组长</span></div>
                      <ol class="dd-list">
                        #for(Users user1 : members[k])
                        #if(
                        ((user1.m_joindate.substring(0,4)==(""+year)&&user1.m_joindate.substring(5,6)=="1")||(user1.m_joindate.substring(0,4)==(""+(year+1))&&user1.m_joindate.substring(5,6)=="0"))
                        &&user1.m_id!=group.g_leader)
                        <li class="dd-item" data-id="3" onclick="location.href='users/${user1.m_id}'"><div class="dd-handle" style="padding: 5px 10px;"><img src="/static/upload/img/${user1.m_headPortrait}" class="headicon">${user1.m_realname}</div></li>
                        #end
                        #end
                      </ol>
                    </li>
                  </ol>
                </div>
              </div>
              #set(k=k+1)
              #end
            </div>
            #include('/footer.html')
          </section>
        </section>
        <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>

      </section>
    </section>
  </section>
</section>
#include('js.html')
<script>
  //$(".row").hide();

  $(".openorclose").click(function(){
      if($(this).hasClass("active"))
          $(".row").hide();
      else
          $(".row").show();
  });
  $(".accordion-toggle").click(function(){
      var panel = $(this).parents(".panel-default");
      if(panel.find(".collapse").hasClass("in")){
          panel.find(".aplus").show();
          panel.find(".aminus").hide();
      }
      else{
          panel.find(".aplus").hide();
          panel.find(".aminus").show();
      }
  });
</script>
</body>
</html>